<template>
  <div>
    <el-table
      v-table-style
      :data="childTagList"
      style="width: 100%"
      stripe
      border
      header-row-class-name="base-table-header-v3"
      row-class-name="base-table-row-v3"
      v-loading="loading"
    >
      <el-table-column :label="$t('common.fields.providerName.displayName')" show-overflow-tooltip :width="150">
        <template slot-scope="scope">
            <a 
              :href="`${$resourcePrefix}/security/tag/serviceProviderHome/${scope.row.id}`" 
              :data-id="scope.row.id" 
              @click="openDetail(scope.row.id)" 
              class="task-link">
              {{scope.row.serviceProviderName}}
            </a>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.fields.serviceProviderType.displayName')" prop="serviceProviderAttribute" show-overflow-tooltip  :width="120">
      </el-table-column>
      <el-table-column prop="registerCompanyName" :label="$t('common.base.companyName_1')" :width="120" />
      <el-table-column :label="$t('common.fields.serviceProviderManager.displayName')" show-overflow-tooltip :width="120">
        <template slot-scope="scope" v-if="scope.row.serviceProviderManager">
          <template v-if="isOpenData">
            <open-data v-for="item in scope.row.serviceProviderManager" :key="item.staffId" type='userName' :openid="item.staffId"></open-data>
          </template>
          <template v-else>
            {{scope.row.serviceProviderManager.map((i) => (i && i.displayName) || "").join("，")}}
          </template>
        </template>
      </el-table-column>
       <el-table-column :label="$t('common.fields.contact.displayName')" show-overflow-tooltip :width="120">
        <template slot-scope="scope" v-if="scope.row.serviceProviderContact">
          <template v-if="isOpenData">
            <open-data type='userName' :openid="scope.row.serviceProviderContact.staffId"></open-data>
          </template>
          <template v-else>
            {{scope.row.serviceProviderContact.displayName}}
          </template>
        </template>
      </el-table-column>
      <el-table-column :label="$t('common.fields.serviceProviderConstractArea.displayName')" show-overflow-tooltip prop="tagPlaceList" :width="120">
           <template slot-scope="scope">
              <span style="margin-right:10px;" v-for="(item,index) in scope.row.tagPlaceList" :key="index">
                {{ item | fmt_dist }}
              </span>
          </template>
      </el-table-column>
      <el-table-column :label="$t('common.fields.serverWeChat.displayName')" show-overflow-tooltip prop="wechat" :width="70">
      </el-table-column>
      <el-table-column :label="$t('common.fields.email.displayName')" show-overflow-tooltip prop="email" :width="100">
      </el-table-column>
      <el-table-column :label="$t('common.fields.serviceProviderLegalRepresentative.displayName')" show-overflow-tooltip prop="legalPerson" :width="120">
      </el-table-column>
      <el-table-column :label="$t('common.fields.serviceProviderRegisterAddress.displayName')" show-overflow-tooltip prop="address" :width="120">
      </el-table-column>
      <el-table-column  :label="$t('common.base.operation')" :width="100" fixed="right">
        <template slot-scope="scope">
          <el-button
            type="text"
             v-if="providerEdit"
            @click="openDepartmentEditPanel(scope.row)"
          >{{$t('common.base.edit')}}</el-button
          >
          <el-button
            type="text"
            v-if="providerDelete"
            style="color: #fb602c"
            @click="delDepartment(scope.row.id)"
          >{{$t('common.base.delete')}}</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      class="base-pagination"
      :background="true"
      layout="total, prev, pager, next"
      :total="total"
      :page-size="pageInfo.pageSize"
      :current-page="pageInfo.pageNum"
      @current-change="jump"
    >
    </el-pagination>
  </div>
</template>

<script>
import * as serviceProviderHomeApi from "@src/api/serviceProviderHomeApi";
import { isOpenData, openAccurateTab } from '@src/util/platform'
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum'
export default {
  name: "service-child-list",
  props: {
    detailId: {
      type: String,
      default: "",
    },
    // 判断按钮显示隐藏
    initData: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      isOpenData,
      childTagList: [], // 成员列表
      pageInfo: {
        // 分页
        pageNum: 1,
        pageSize: 10,
      },
      total: 0, // 总数
      loading: false
    };
  },
  computed: {
    // 获取标签
    authorities() {
      return this.initData.authorities || {};
    },
    // 删除服务商
    providerDelete() {
      return 'PROVIDER_DELETE' in this.authorities;
    }, 
    // 编辑服务商
    providerEdit() {
      return 'PROVIDER_EDIT' in this.authorities;
    }
  },
  mounted() {
    this.getSerChildTagList();
  },
  methods: {
    // 部门主页子部门
    getSerChildTagList() {
      this.loading = true;

      serviceProviderHomeApi.getSerChildTagList({
        tagName: "",
        parentId: this.detailId,
        ...this.pageInfo
      }).then((res) => {
        const { status, message, data } = res;
        if (status !== 0) return;

        this.childTagList = data.list;
        this.total = data.total;

        this.loading = false;
      }).catch(e=>{
        this.loading = false;
        console.error('fetch task caught e', e)
      })
    },
    jump(e) {
      this.pageInfo.pageNum = e;
      this.getDeptChildTagList();
    },
    // 编辑
    openDepartmentEditPanel(row){
      this.$emit('childEdit',row);
    },
    // 删除
    delDepartment(id){
      this.$emit('childDel',id);
    },
    // 子部门详情
    openDetail(id){
      //  this.$platform.openTab({
      //   id: `service_home`,
      //   title: '部门主页',
      //   close: true,
      //   url: `/security/tag/serviceProviderHome/${id}`
      // });
      openAccurateTab({
        type: PageRoutesTypeEnum.PageServiceHome,
        key: id,
      })
    }
  }
};
</script>

<style lang="scss" scoped>
.task-link {
  @include fontColor();
}
</style>
